<template>
    <view class="fishlive-container">
     
      <scroll-view class="form-scroll" scroll-y>
        <view class="form-list">
          <view class="form-item">
            <text class="form-label">活鱼重量：</text>
            <input class="form-input" v-model="form.totalWeight" type="number" placeholder="请输入" />
          </view>
          <view
            class="spec-block"
            v-for="(item, idx) in specList"
            :key="item.label"
          >
            <view class="spec-title">{{ item.label }}</view>
            <view class="spec-row">
              <text class="spec-label">重量：</text>
              <input class="spec-input" v-model="item.weight" type="number" placeholder="请输入" />
            </view>
            <view class="spec-row">
              <text class="spec-label">单价：</text>
              <input class="spec-input" v-model="item.price" type="number" placeholder="请输入" />
            </view>
            <view class="spec-row">
              <text class="spec-label">金额：</text>
              <input class="spec-input" v-model="item.amount" type="number" placeholder="请输入" />
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="bottom-btns">
        <button class="bottom-btn" @click="prevStep">上一步</button>
        <button class="bottom-btn" @click="nextStep">下一步</button>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {
          totalWeight: 10
        },
        specList: [
          { label: '100/200B', weight: 10, price: 10, amount: 10 },
          { label: '200/300C', weight: 10, price: 10, amount: 10 },
          { label: '300/500D', weight: 10, price: 10, amount: 10 },
          { label: '800/1150C', weight: 10, price: 10, amount: 10 },
          { label: '500/800E', weight: 10, price: 10, amount: 10 },
          { label: '1150C以上J', weight: 10, price: 10, amount: 10 }
        ]
      }
    },
    methods: {
      goBack() {
       
      },
      prevStep() {
         uni.navigateBack();
      },
      nextStep() {
       uni.navigateTo({
       	url:'/pages/home/gongchang/rest-fish'
       })
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
  .fishlive-container {
    background: #fff;
    min-height: 100vh;
    padding-bottom: 120rpx;
  }
  .header-bar {
    display: flex;
    align-items: center;
    height: 80rpx;
    border-bottom: 1rpx solid #eee;
    margin-bottom: 10rpx;
  }
  .back-btn {
    font-size: 40rpx;
    color: #3b6ca8;
    margin-right: 20rpx;
    width: 60rpx;
    text-align: center;
    cursor: pointer;
  }
  .header-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
  }
  .form-scroll {
    max-height: 100vh;
    overflow-y: auto;
  }
  .form-list {
    width: 100%;
    padding: 0 20rpx;
  }
  .form-item {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
  }
  .form-label {
    width: 180rpx;
    font-size: 30rpx;
    color: #333;
    text-align: right;
    margin-right: 12rpx;
    flex-shrink: 0;
    line-height: 60rpx;
  }
  .form-input {
    flex: 1;
    height: 60rpx;
    border: 1rpx solid #a6d3ff;
    border-radius: 10rpx;
    padding: 0 16rpx;
    font-size: 30rpx;
    background: #f7f7f7;
    color: #333;
	margin-right: 100rpx;
  }
  .spec-block {
    margin-bottom: 24rpx;
  }
  .spec-title {
    display: inline-block;
    background: #3b6ca8;
    color: #fff;
    border-radius: 10rpx;
    padding: 8rpx 24rpx;
    font-size: 30rpx;
    margin-bottom: 10rpx;
  }
  .spec-row {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
  }
  .spec-label {
    width: 100rpx;
    font-size: 30rpx;
    color: #333;
    text-align: right;
    margin-right: 8rpx;
    flex-shrink: 0;
  }
  .spec-input {
    flex: 1;
    height: 60rpx;
    border: 1rpx solid #a6d3ff;
    border-radius: 8rpx;
    padding: 0 8rpx;
    font-size: 30rpx;
    background: #f7f7f7;
    color: #333;
	margin-right: 100rpx;
  }
  .bottom-btns {
    display: flex;
    justify-content: space-around;
    position: fixed;
    left: 0;
    bottom: 20rpx;
    width: 100vw;
    z-index: 10;
  }
  .bottom-btn {
    width: 40vw;
    height: 70rpx;
    background: #a6d3ff;
    color: #fff;
    border: none;
    border-radius: 12rpx;
    font-size: 28rpx;
    margin: 0 10rpx;
  }
  </style>